<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Elements Encode</title>
    <link
      rel="shortcut icon"
      href="https://www.baidu.com/favicon.ico"
    />
    <link
      href="../static/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="../static/crypto-js.min.js"></script>
    <script src="/static/encode.js"></script>
  </head>
  <style type="text/css">
    body {
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: url('https://ryzenx.oss-accelerate.aliyuncs.com/cur/Diamond_Sword.cur'), auto;
      background-image: url('https://unsplash.it/1920/1080?random');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      font-family: 'SF Pro Text', 'SF Pro Icons', -apple-system, 'Helvetica Neue', 'Helvetica',
        'Arial', sans-serif;
    }

    .container {
      height: auto;
      width: 80%;
      backdrop-filter: blur(4px);
      background-color: rgba(25, 250, 250, 0.4);
      opacity: 0.9;
      border-radius: 15px;
      margin: 10%;
    }

    .title {
      margin-top: 10px;
      font-size: 2rem;
      font-family: 'SF Pro Text', 'SF Pro Icons', -apple-system, 'Helvetica Neue', 'Helvetica',
        'Arial', sans-serif;
    }

    .data {
      width: auto;
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
    }

    .label {
      width: auto;
      height: auto;
      margin: 8px 8px 8px 0;
      font-family: 'Fira Code', 'Jetbrains Mono', 'Ubuntu Mono', Menlo, 'PT Mono', 'Source Han Mono';
    }

    .btns {
      display: flex;
      flex-direction: row;
      justify-content: start;
      align-items: center;
      margin-top: 12px;
      margin-bottom: 12px;
    }

    .form-control {
      font-family: 'Fira Code', 'Jetbrains Mono', 'Ubuntu Mono', Menlo, 'PT Mono', 'Source Han Mono';
    }
  </style>

  <body onload="onLoad()">
    <div class="container">
      <div class="title">元素周期表 编解码器</div>
      <div
        id="updateTime"
        class="label"
        style="font-size: smaller"
      ></div>
      <div class="data">
        <div class="label">#1</div>
        <textarea
          id="data1"
          class="form-control"
          aria-label="With textarea"
          style="min-height: 150px"
        ></textarea>
      </div>
      <div class="btns">
        <button
          id="encode"
          onclick="doEncode()"
          type="button"
          class="btn btn-primary"
        >
          从 #1 编码
        </button>
        <div style="width: 12px"></div>
        <button
          id="decode"
          onclick="doDecode()"
          type="button"
          class="btn btn-secondary"
        >
          从 #1 解码
        </button>
        <div style="width: 12px"></div>
        <button
          id="copy"
          onclick="copy()"
          type="button"
          class="btn btn-info"
        >
          拷贝 #2 内容
        </button>
        <div style="width: 12px"></div>
        <button
          id="clear"
          onclick="clearText()"
          type="button"
          class="btn btn-success"
        >
          清空
        </button>
      </div>
      <div class="data">
        <div class="label">#2</div>
        <textarea
          id="data2"
          class="form-control"
          aria-label="With textarea"
          style="min-height: 150px"
          contenteditable="false"
        ></textarea>
      </div>
      <div style="height: 18px"></div>
    </div>
  </body>
</html>
